<template>
	<div>
		<div class="head">
			<a class="return" @click="getBack"></a>
		</div>
		<div class="overlay" style="padding: 20px 10px 10px;">
			<div class="overlay-content scrolling">
				<div class="auth">
					<div class="auth_title">
						身份认证
					</div>
					<div class="auth_area">
						<div>
							<van-cell-group>
								<p style="margin-bottom: 5px;">
									<font color="848cab" size="2">国家或地区</font>
								</p>
								<span>中国</span>
								<p>
									<font color="848cab" size="2">姓名</font>
								</p>
								<van-cell>
									<van-field v-model.trim="name" placeholder="请输入您的姓名" maxlength="10">
									</van-field>
								</van-cell>
								<p>
									<font color="848cab" size="2">身份证号码</font>
								</p>
								<van-cell>
									<van-field v-model.trim="num" placeholder="请输入您的身份证号码" maxlength="18">
									</van-field>
								</van-cell>
								<p>
									<font color="848cab" size="2">确认身份证号码</font>
								</p>
								<van-cell>
									<van-field v-model.trim="num2" placeholder="请再次输入您的身份证号码" maxlength="18">
									</van-field>
								</van-cell>
							</van-cell-group>
						</div>
					</div>
					<div class="auth_footer">
						<van-button type="primary" @click="submit" :loading="load">保存</van-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { base } from './../utils/api';
	export default {
		data() {
			return {
				num: '',
				num2: '',
				name: '',
				load: false
			}
		},
		mounted() {

		},
		watch: {
			name: function() {
				this.name = this.name.replace(/[^A-Za-z0-9\u4e00-\u9fa5]/g, ''); // 只能输入数字，英文及中文
			},
			num: function() {
				this.num = this.num.replace(/[^\a-\z\A-\Z0-9]/g, ''); // 只能输入数字，英文
			},
			num2: function() {
				this.num2 = this.num2.replace(/[^\a-\z\A-\Z0-9]/g, ''); // 只能输入数字，英文
			}
		},
		methods: {
			submit() {
				if(!this.name) {
					this.$toast("用户姓名不能为空！");
					return false;
				}
				if(!this.num) {
					this.$toast("身份证号码不能为空！");
					return false;
				}
				if(!this.num2) {
					this.$toast("确认身份证号码不能为空！");
					return false;
				}
				if(this.num != this.num2) {
					this.$toast("两次身份证号码输入不一致！");
					return false;
				}
				this.load = true;
				base.getReal_name({
					"trueName": this.name,
					"idCard": this.num,
					"confirmidCard": this.num2
				}).then(res => {
					if(res.code == 200) {
						this.$toast("实名认证成功！");
						setTimeout(() => {
							if(this.$route.query.roid) {
								this.$router.push({
									path: "AuthSuccess",
									query: {
										roid: 'Otc'
									}
								});
							} else {
								this.$router.push({
									path: '/AuthSuccess'
								});
							}
						}, 500);
					} else {
						this.$toast(res.msg);
					}
					this.load = false;
				})
			},
			getBack() {
				if(this.$route.query.roid) {
					this.$router.push({
						path: this.$route.query.roid
					});
				} else {
					this.$router.push({
						path: '/My'
					});
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	/deep/ .van-cell-group {
		background-color: #2c3145;
	}
	
	/deep/ .van-cell__title {
		color: #ffffff;
	}
	
	/deep/ .van-cell--clickable:active {
		background-color: #2c3145 !important;
	}
	
	/deep/ .van-cell {
		padding: 5px 5px 5px 0px;
	}
	
	/deep/ .van-button--primary {
		background: #3fb776;
		border-radius: 5px;
	}
	
	/depp/ .van-button {
		border-radius: 5px !important;
	}
	
	/deep/ .van-cell:not(:last-child)::after {
		left: 0px;
	}
	
	/deep/ input::-webkit-input-placeholder {
		/* Chrome/Opera/Safari */
		color: #545b74 !important;
	}
	
	/deep/ input::-moz-placeholder {
		/* Firefox 19+ */
		color: #545b74 !important;
	}
	
	/deep/ input:-ms-input-placeholder {
		/* IE 10+ */
		color: #545b74 !important;
	}
	
	/deep/ input:-moz-placeholder {
		/* Firefox 18- */
		color: #545b74 !important;
	}
	
	.auth {
		.auth_title {
			font-size: 22px;
			margin-bottom: 30px;
		}
		.auth_area {
			p {
				margin-top: 20px;
			}
		}
		.auth_footer {
			width: 90%;
			margin: 100px auto 20px;
		}
	}
	
	/deep/ .van-cell:not(:last-child)::after {
		border: 0;
	}
	
	/deep/ [class*=van-hairline]::after {
		border: 0;
	}
	
	/deep/ .van-cell__value .van-cell__value--alone {
		border-bottom: 1px solid rgba(77, 89, 126, 0.8);
		padding-bottom: 10px;
	}
</style>